<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">

<head>

</head>

<body tiles:fragment="content">
 	<div>
		<h5>
			<p th:text="#{activarFase.activarFase}">Activar Fase de Atención de Solicitud</p>
		</h5>
		<hr />
		
		<h2>
			<p th:text="#{busqueda.titulo}">Filtros de Búsqueda</p>
		</h2>

		<div>
			<form action="#" th:object="${filtroBusqueda}" th:action="@{/consultarFasesInactivas}"
				method="post" class="inline">

			<div class="notice" th:if="${faseActivada}">
                  <span th:text="#{activarFase.msgActivada(${faseActivada})}">Ha activado una fase para su atención</span><br />
            </div>
            
				<div class="error" th:if="${flagError}">
                  <span th:each="err : ${#fields.errors('*')}">
                  <span th:text="${err}">Entrada incorrecta</span><br />
                  </span>
           	    </div>
				
				<fieldset>
					<div class="span-6">
					<p>					
						<label th:text="#{busqueda.cliente}">Cliente </label><br/>
						<input type="text" id="clienteBusqueda" th:field="*{clienteBusqueda}" />
					</p>
					</div>
					<div class="span-11 last">
					<p>			
						<label th:text="#{busqueda.fechaProgramadaInicio}">Fecha de Inicio</label><br/>
						<span th:text="#{busqueda.desde}">Desde:</span>
						<input type="text" id="from" name="from" th:field="*{fechaBusquedaInicio}" readonly="readonly"/>
						<span th:text="#{busqueda.hasta}">Hasta:</span>
						<input type="text" id="to" name="to" th:field="*{fechaBusquedaFin}" readonly="readonly"/>
					</p>					  
	                </div>
	                <div class="span-4 last">
	              	    <button type="submit" th:text="#{busqueda.buscar}">Buscar solicitudes</button>
	                </div>				
						
				</fieldset>
			</form>		
		</div>			
			<div id="resultadoSolicitudes" th:if="${listaFases}">
				<h2><p th:text="#{busqueda.resultadoDeBusqueda}">Resultado de Búsqueda</p></h2>
				  <div>
				  
				  <div class="notice" th:if="${tienePrioritarios}">
                  <span th:text="#{activarFase.tienePrioritarios}">Existen solicitudes con prioridad de activación</span><br />                  
           	    </div>
				  	
				    <table class="summary">
				        <thead>
				            <tr>				            	
				                <th th:text="#{resultado.fase}">Fase</th>
				                <th th:text="#{resultado.solicitud}">Nro Solicitud</th>
				                <th th:text="#{resultado.cliente}">Cliente</th>
				                <th th:text="#{resultado.fechaProgramadaInicio}">Fecha programada inicio</th>
				                <th th:text="#{resultado.fechaProgramadaFin}">Fecha programada fin</th>
				                <th colspan="2" th:text="#{resultado.accion}">Acción</th>
				            </tr>
				        </thead>
				        <tbody>
				            <tr th:each="fase : ${listaFases}">				            	
				                <td th:classappend="${fase.fechaProgramacionVencida}? 'highlight'" th:text="${fase.nombre}">Desarrollo</td>
				                <td th:classappend="${fase.fechaProgramacionVencida}? 'highlight'" th:text="${fase.solicitud.id}">56</td>
				                <td th:classappend="${fase.fechaProgramacionVencida}? 'highlight'" th:text="${fase.solicitud.solicitante.cliente.razonSocial}">Aurora S.A.</td>
				                <td th:classappend="${fase.fechaProgramacionVencida}? 'highlight'" th:text="${#dates.format(fase.fechaProgramadaInicio, #messages.msg('date.format'))}">10/10/2013</td>
				                <td th:classappend="${fase.fechaProgramacionVencida}? 'highlight'" th:text="${#dates.format(fase.fechaProgramadaFin, #messages.msg('date.format'))}">30/10/2013</td>
				                <td th:classappend="${fase.fechaProgramacionVencida}? 'highlight'" >
				                <script th:inline="javascript">
								//<![CDATA[
								  $(function() {
								    $( /*[[${'#calendario'+ fase.id}]]*/
								    		).dialog({
								      autoOpen: false,
								      resizable: false,
								      height:800,
								      width: 800,
								      draggable: false,
								      modal: true,
								      buttons: {
								        "Cerrar": function() {
								          $( this ).dialog( "close" );
								        }
								      }
								    });
								    $( /*[[${'#openerCalendario'+ fase.id}]]*/
								    		).click(function() {
								        $( /*[[${'#calendario'+ fase.id}]]*/
								        		).dialog( "open" );
								        $(/*[[${'#calendarioFechas'+ fase.id}]]*/
								        		).fullCalendar('render');
								      });
								  });						
									
										$(document).ready(function() {
							           
							            $( /*[[${'#calendarioFechas'+ fase.id}]]*/
							            		).fullCalendar({
							                header: {
							                    left: 'prev,next today',
							                    center: 'title',
							                    right: 'month,agendaWeek,agendaDay'
							                },
							                editable: false,
							                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
							                             'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
							                dayNames:   ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
							                monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
							                dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
							                allDaySlot: false,
							                firstHour: 8,
							                eventSources:   [
							                	/*[[@{'/getRestringidos'}]]*/
							                	,
							                	/*[[@{'/getCalendarioFase/' + ${fase.id}}]]*/						                	
							                ]
							            });
							         });
								//]]>
								</script>
								<div th:id="${'calendario' + fase.id}">
									<div th:id="${'calendarioFechas' + fase.id}"></div>						
								</div>						
											
			 					<button type="button" th:id="${'openerCalendario' + fase.id}" class="button" th:value="#{resultado.verCalendarioSolicitud}">Ver calendario de solcitud</button>
							    </td>
				                <td th:classappend="${fase.fechaProgramacionVencida}? 'highlight'" ><a class="button positive" href="#" th:text="#{resultado.activarFase}" th:href="@{'activarFase/' + ${fase.id}}">Activar Fase</a></td>
				            </tr>
				            <tr th:if="${listaFases.isEmpty()}">
				                <td colspan="7" th:text="#{resultado.noResultados}">No se encontraron resultados</td>
				            </tr>
				        </tbody>
				    </table>
				  </div>				
				</div>
			</div>
</body>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- END of the content to be included in the execution result -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

</html>
